<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="产品品号" label-width=140>
				<u-input v-model="form.produceNo" placeholder="请输入产品品号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="排产编号" label-width=140>
				<u-input v-model="form.planNo" placeholder="请输入排产编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工段编号" label-width=140>
				<u-input v-model="form.sectionNo" placeholder="请输入工段编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工单单号" label-width=140>
				<u-input v-model="form.workOrderNo" placeholder="请输入工单单号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工单单别" label-width=140>
				<u-input v-model="form.orderType" placeholder="请输入工单单别" border clearable></u-input>
			</u-form-item>
			<u-form-item label="上线状态" label-width=140 v-if="userInfo.departmentName == '数控车间'">
				<u-radio-group v-model="form.isOnline" @change="radioChangeLine" >
					<u-radio shape="square" 
							 v-for="(item, index) in statusLine" 
							 :name="item.name" 
							 :key="index"
							 @change="radioChangeLine2">
							 {{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="排产状态" label-width=140>
				<u-radio-group v-model="form.isEnd" @change="radioChange" >
					<u-radio shape="square" 
							 v-for="(item, index) in statusList" 
							 :name="item.name" 
							 :key="index">
							 {{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="checkInfo">查询</u-button>
				<u-button type="primary" :loading="loading" size="medium" @click="onlineAll" style="margin-left: 20rpx" v-if="userInfo.departmentName == '数控车间'">一键上线</u-button>
			</u-form-item>
		</u-form>
		<view class="table-content">
			<view class="hintInfo" v-if="pullDown">————下拉获取信息————</view>
			<view v-else class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
					<view class="list-item">
						<view>工段编号</view>
						<view>{{item.sectionNo}}</view>	
					</view>
					<view class="list-item">
						<view>排产序号</view>
						<view>{{item.planNo}}</view>
					</view>
					<view class="list-item">
						<view>预计排产时间</view>
						<view>{{item.estimateStartTime}}</view>
					</view>
					<view class="list-item">
						<view>工作中心</view>
						<view>{{item.workCenter}}</view>
					</view>
					<view class="list-item">
						<view>工单单号</view>
						<view>{{item.workOrderNo}}</view>
					</view>
					<view class="list-item">
						<view>工单单别</view>
						<view>{{item.orderType}}</view>
					</view>
					<view class="list-item">
						<view>计划排产数量</view>
						<view>{{item.planNumber}}</view>
					</view>
					<!-- 下线数量与合格数量后端是从-1开始计数，此处做出了相应的处理 -->
					<view class="list-item">
						<text>下线数量</text>
						<text>{{item.productionCountAll == -1 ? '0' : item.productionCountAll}}</text>
					</view>
					<view class="list-item">
						<text>合格数量</text>
						<text>{{item.qualifiedCount == -1 ? '0' : item.qualifiedCount}}</text>
					</view>
					<view class="list-item">
						<text>工作状态</text>
						<view>{{item.isEnd == 1 ? '完工' : '未完工'}}</view>
					</view>
					<view class="list-item" v-if="item.isOnline">
						<text>职级约束</text>
						<view class="u-flex u-flex-nowrap">
							<text>无约束</text>
							<u-switch v-model="item.jobClassRestrict" @change="ignoreLevel(item.jobClassRestrict,item.planId)"></u-switch>
							<text>有约束</text>	
						</view>
					</view>
					<view class="list-item">
						<text>上线状态</text>
						<view>{{item.isOnline == 0 ? '未上线' : '已上线'}}</view>
					</view>
					<view class="operateBtn">
						<u-button size="default" type="success" @click="findLinji1(item,index)">上线</u-button>
						<u-button size="default" type="warning" @click="offlineCause(item.planId)">下线</u-button>
						<u-button size="default" type="error" @click="secondConfirm(item.planNo)">结束</u-button>
						<u-button size="default" type="primary" @click="updateData(item)">刷新</u-button>
					</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-modal v-model="showlinji" :content="contentlinji" :show-cancel-button="cancleBtnlinji" @cancel="cancellinji" @confirm="confirmlinji"></u-modal>
		<u-modal v-model="show" :content="content" :async-close="true" :show-cancel-button="cancleBtn" @cancel="cancel" @confirm="confirm"></u-modal>
		<u-popup v-model="offlines" mode="center" width="80%" height="400rpx" border-radius="14">
			<view class="list-items-form">
				<u-form :model="listQuery" ref="uForm" style="width: 90%;">
					<u-form-item label="下线说明" prop="cause" label-width="160" :border-bottom="false">
						<u-input height="40" :type="type" :auto-height="autoHeight" v-model="listQuery.cause" placeholder="请输入下线说明" style="width: 60%;"/>
						<!-- <u-input v-model="listQuery.cause" type="textarea" :auto-height="autoHeight" placeholder="请输入下线说明" /> -->
					</u-form-item>
				</u-form>
				<view class="u-flex u-row-around item-l" style="width: 90%;margin: 20rpx 0;">
					<u-button type="info" size="medium" @click="cancel">取消</u-button>
					<u-button type="success" size="medium" @click="saveCause">提交</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getPlanList,planOffline,planOnline,planOnlineAll, updateJobClassRestrict,updateOrderPlan,updStation,accessPersonInfo,saveCause,getfindprotech } from '../../../utils/index.js'
	export default {
		data () {
			return {
				form: {					//form表单用以记录用户需要查询的数据
					page: 1,
					limit: 200,
					produceNo: '',		//产品编号
					planNo: '',			//排产编号
					sectionNo: '',		//工段编号
					workOrderNo: '',	//工单单号
					orderType: '',		//工单单别
					isEnd: '未结束',		//排产是否结束 ,默认为未结束
					isOnline: '未上线'
				},
				isOnlineStatus: '',
				num: 0,
				content: '是否确定结束该工单',
				contentlinji: '该工单有临技',
				cancleBtn: true,		//弹出框的“取消”按钮显示条件
				cancleBtnlinji: true,		//弹出框的“取消”按钮显示条件
				show: false,
				showlinji: false,
				overInfo: '',			//工单结束信息放置
				// 单选框的选择信息
				statusList: [
					{	
						name: '已结束'
					},
					{
						name: '未结束'
					}
				],
				// 上线状态单选框的选择信息
				statusLine: [
					{
						name: '已上线'
					},
					{
						name: '未上线'
					}
				],
				records: [],			//工段信息表单，内含对象
				onlineStyle: ["",""],	//当工段为上线状态时填充的样式
				pullDown: true,			//使能当前页面的下拉刷新功能
				userInfo: {},
				listQuery: {
					planId: '',
					cause: ''			//下线说明
				},
				offlines: false,			//填写下线说明弹窗
				autoHeight: true,
				type: 'textarea',
				loading: false,
				onlinePlanidobj: {}
			}
		},
		methods:{
			// 查询按钮绑定函数
			// for循环是为了将isOnline的工单进行样式的改变
			// 若查询信息不正确，this.records则为空，但是后台返回的信息均是“操作成功”，所以在此处加上this.records为空的判断逻辑
			async checkInfo() {
				let query = Object.assign({},this.form)
				query.isEnd = (query.isEnd == "未结束") ? "0" : "1"				//后台只接受0与1，所以该数据需处理
				if(this.userInfo.departmentName == '数控车间'){
					if(query.isOnline){
						query.isOnline = (query.isOnline == "未上线") ? 0 : 1				//后台只接受0与1，所以该数据需处理
					} else {
						delete query.isOnline
					}
				} else {
					delete query.isOnline
				}
				const {data} = await getPlanList(query)
				this.records = data.data.records
				this.pullDown = false
				if(this.records.length == 0) {
					this.$refs.uTips.show({
						title: '排产信息不存在，请核实！',
						type: 'warning',
						duration: '2000'
					})
				} else {
					this.records.sort(function(a,b){						//日期的升序排列
						return a.estimateStartTime > b.estimateStartTime ? 1 : -1
					})
					for(let i = 0;i < this.records.length;i++){				//已上线的工段排列在最前面
						this.onlineRise(i)
					}
					for(let i = 0;i < this.records.length;i++){				//遍历records数组改变背景颜色
						this.judgeStyle(i)
					}
				}
			},
			// 工段长设置职级不约束开关
			// 传递的实参为当前jobClassRestrict以及planId
			// 1=有约束，0=无约束
			async ignoreLevel(element1,element2) {
				let query = {}
				query.planId = element2
				query.jobClassRestrict = (element1 == true ? 1 : 0)
				const data = await updateJobClassRestrict(query)
			},
			// 排产状态切换函数，实参为name,传递的name为“未结束”与“已结束”
			radioChange(name) {
				this.form.isEnd = name
			},
			radioChangeLine(name) {
				if(name == this.isOnlineStatus && this.num == 0){
					this.num++
				} else {
					this.form.isOnline = ''
					this.num = 0
				}
			},
			radioChangeLine2(name){
				this.isOnlineStatus = name
				this.num = 0
			},
			// 对数组排序，上线状态的数组排列到最前面
			//在对工段上线以后返回到页面顶部
			onlineRise(value) {
				if(this.records[value].isOnline == "1") {
					const riseTarget = this.records.splice(value,1)[0]
					this.records.unshift(riseTarget)
					uni.pageScrollTo({
					    scrollTop: 0,
					    duration: 300
					});
				}
			},
			// 该函数判断isOnline的状态来决定背景不同的颜色
			// 实参value是this.records内的对象
			// isOnline为1时为上线状态，为0为下线状态
			judgeStyle(value) {
				if(this.records[value].isOnline == "0") {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
			// 上线按钮绑定函数
			// value为item.planId，即排产Id
			async onlineFunc(value,index) {
				const data = await planOnline({planId:value,jobNumber: this.userInfo.jobNumber})
				const errMsg = data.data.msg
				if(data.data.code == '1'){
					if(this.userInfo.departmentName != '数控车间'){
						this.checkInfo()
					} else {
						this.records[index].isOnline = 1
						this.onlineStyle[index] = "background-color: #90EE90;"
					}
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			
			// 一键上线按钮绑定函数
			async onlineAll() {
				if(this.loading) return
				this.loading = true
				uni.showLoading({
					title: '正在上线！'
				});
				const data = await planOnlineAll({jobNumber: this.userInfo.jobNumber})
				const errMsg = data.data.msg
				if(data.data.code == '1'){
					uni.hideLoading();
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
				this.loading = false
			},
			// 获取个人信息的函数
			// 获取员工信息赋值给form
			async getUserInfo(){
				const {data} = await accessPersonInfo()
				this.userInfo = Object.assign({},data.data)
			},
			// 下线按钮绑定函数
			// planId作为实参，即排产Id
			async offlineFunc(value) {
				const data = await planOffline({planId:value})
				if(data.data.code == '1'){
					this.checkInfo()
					this.$refs.uTips.show({
						title: '下线成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '下线失败',
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 如果工艺二次乃至三次修改了工序，需要工段长刷新后才能使用这个品号
			async updateData(item){
				const data = await updStation({planNo: item.planNo,sectionNo: item.sectionNo})
				const errMsg = data.data.msg
				if(data.data.code == '1'){
					this.checkInfo()
					this.$refs.uTips.show({
						title: '刷新成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			offlineCause(value){
				this.listQuery.planId = value
				this.offlines = true
			},
			// 下线说明
			async saveCause(){
				let query = Object.assign({},this.listQuery)
				if(!query.cause) return this.$refs.uToast.show({
					title: '请输入下线说明',
					type: 'error',
					duration: 2000
				})
				const data = await saveCause(query)
				const errMsg = data.data.msg
				if(data.data.code == '1'){
					this.offlineFunc(query.planId)
					this.offlines = false
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 弹出框“确认”解绑的函数
			confirm() {
				this.overFunc(this.overInfo)
				this.show = false
			},
			// 弹出框“取消”解绑的函数
			cancel() {
				this.show = false
				this.offlines = false
			},
			cancleBtnlinji(){
				this.showlinji = false
			},
			secondConfirm(value) {
				this.show = true
				this.overInfo = value
			},
			async overFunc(value) {
				const data = await updateOrderPlan({planNo:value,isEnd: 1})
				if(data.data.code == '1'){
					this.checkInfo()
					this.$refs.uTips.show({
						title: '结束成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '结束失败',
						type: 'warning',
						duration: '2000'
					})
				}
			},
			async findLinji1(item,index){
				let query = {
					OrderType: item.orderType,
					WorkOrderNo: item.workOrderNo,
				}
				const data = await getfindprotech(query)
				if(data.data.code == '1') {
					if(data.data.data && data.data.data.processOrder){
						this.showlinji = true
						this.onlinePlanidobj = {
							planId: item.planId,
							index: index
						}
					} else {
						this.onlineFunc(item.planId,index)
					}
				}
			},
			confirmlinji(){
				this.onlineFunc(this.onlinePlanidobj.planId,this.onlinePlanidobj.index)
			}
		},
		onLoad(option) {
			this.getUserInfo()
		},
		// 下拉刷新,即调用查询按钮绑定的函数
		onPullDownRefresh() {
			this.checkInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			},2000)
		},
	}
</script>

<style lang="scss" scoped>
.main-content {
	width: 100%;
}
.scroller {
	width: 100%;
	overflow: hidden;
}
.main-content ::v-deep .u-form {
	margin: 0rpx 10rpx;
	padding: 0rpx 10rpx;
}
#form-container ::v-deep .u-form-item {
	margin-top: 5rpx;
	padding: 5rpx 0rpx;
}
// 查询按钮样式
.checkBtn {
	display: flex;
	justify-content: center;
}
// 排产返回的列表信息块外层包裹器
.list-item-wrapper {
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #FFEFD5;
}
// 排产返回的列表信息块的样式
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
// 上线下线按钮样式
.operateBtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.hintInfo {
	display: flex;
	justify-content: center;
	color: #E0E0E0;
}
.list-items-form{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-direction: column;
}
</style>